<!--
 * @Description: 柱状图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:28:28
-->
<template>
  <div>
    <div ref="container" style="height:200px"></div>
  </div>
</template>

<script>
import { Column } from '@antv/g2plot';
export default {
  data() {
    return {};
  },
  methods: {
    createdColumn (){
      const paletteSemanticRed = '#8fd9d9';
const brandColor = '#6373f7 ';
const columnPlot = new Column(this.$refs.container, {
  data:[
  { type: '山西农大主体育场工程', value: 2 },
  { type: '太原理工大学一号教学楼工程', value: 1},
  { type: '中北大学', value: 1.5},
  { type: '兰州理工大学', value: 1 },
  { type: '山西大学', value: 0},
  { type: '湘南学院', value: 0.5},
  { type: '湖南大学', value: 0 },
  ],
  xField: 'type',
  yField: 'value',
  seriesField: '',
  color: ({ type }) => {
    if (type === '湘南学院' || type === '太原理工大学一号教学楼工程') {
      return paletteSemanticRed;
    }
    return brandColor;
  },
  label: {
    content: (originData) => {
      const val = parseFloat(originData.value);
      if (val < 0) {
        return (val * 100).toFixed(1) + '%';
      }
    },
    offset: 10,
  },
  columnStyle: {
        radius: [20, 20, 0, 0],
      },
  legend: false,
  xAxis: {
    label: {
      autoHide: true,
      autoRotate: false,
    },
  },
});

columnPlot.render();
    }
  },
  mounted() {
    this.createdColumn();
  },
};
</script>
<style scoped>
</style>